/* 
  学习目标：setState是异步更新
  1. 异步更新
  2. 连续调用setState会合并
  3. 连续调用setState，render只会执行一次
*/

import React from 'react';

export default class App extends React.Component {
  state = {
    count: 0,
  };

  handleClick = () => {
    // 异步代码，会导致异步更新组件

    this.setState({
      count: this.state.count + 1,
    });

    this.setState({
      count: this.state.count + 2,
    });

    this.setState({
      count: this.state.count + 3,
    });

    console.log(this.state.count, 'count'); //?
  };

  render() {
    console.log('render被执行了');
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>
      </div>
    );
  }
}
